<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title th:text="${sysName}"></title>
        <meta name="Keywords" content="东方学者,建设,服务数据的汇总与分析">
        <meta name="Description" content="东方学者建设服务数据的汇总与分析">
        <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
        <link href="css/login/base.css" rel="stylesheet"/>
        <link href="css/login/iconfont.css"  rel="stylesheet"/>
        <link href="css/login/reg.css" rel="stylesheet" />
    </head>
    <body>
        <div id="ajax-hook"></div>
        <div class="wrap">
            <div class="wpn">
                <div class="form-data pos">
                    <a href=""><input type="hidden" id="loginfrom" th:value="${loginfrom}" >
                    <div class="head-systit" th:text="${sysName}">
                    </div>
                    </a>
                    <div class="form1">
                        <p class="p-input pos">
                            <label for="num">请输入用户名</label>
                            <input type="text" id="num" >
                            <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                        </p>
                        <p class="p-input pos">
                            <label for="pass">请输入密码</label>
                            <input type="password" style="display:none">
                            <input type="password" id="pass" autocomplete="new-password" >
                            <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                        </p>
                        <p class="p-input pos code hide">
                            <label for="veri">请输入验证码</label>
                            <input type="text" id="veri">
                            <img src="http://www.17sucai.com/preview/1064026/2018-02-04/ui.rar/index.html">
                            <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                            <!-- <a href="javascript:;">换一换</a> -->
                        </p>
                    </div>
                    <div class="r-forget cl">
                        <!--<a href="" class="z">账号注册</a>
                        <a href="" class="y">忘记密码</a>-->
                    </div>
                    <button class="lang-btn off log-btn">登录</button>
                    <p class="right">上海教育人才交流服务中心 © 2018</p>
                </div>
            </div>
        </div>
        <script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
        <script src="css/login/jquery.js"></script>
        <script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
        <script>
            $(function(){
                // 登录的回车事件
                $(window).keydown(function(event) {
                    if (event.keyCode == 13) {
                        $('.log-btn').trigger('click');
                    }
                });

                $(".icon-ok-sign").click(function(){
                    verify = $(this).hasClass('boxcol') ? 0 : 1;
                    $(this).toggleClass('boxcol');
                    ob = $('input[name=agree]');
                    ob.val(ob.val()==0?1:0);
                    ob.val(ob.val() !== verify ? verify : ob.val());

                    ob.val() == 0 ? $('#errormsg').removeClass('hide').addClass('show') : $('#errormsg').removeClass('show').addClass('hide');
                });

                //输入框输入时模拟placeholder效果
                var oInput = $(".form-data input");
                oInput.focus(function () {
                    $(this).siblings("label").hide();
                });

                oInput.blur(function () {
                    if($(this).val()==""){
                        $(this).siblings("label").show();
                    }
                });

                // 输入框内容变化按钮颜色发生变化
                oInput.keyup(function () {
                    if($(this).val()!="jquery.js"){
                        $(".log-btn").removeClass("off")
                    }else{
                        $(".log-btn").addClass("off")
                    }
                });

                $('#num').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#pass').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#veri').keyup(function(event) {
                    $('.tel-warn').addClass('hide');
                    checkBtn();
                });

                $('#num').val('admin').focus();
                $('#pass').focus();

            });

                // 按钮是否可点击
                function checkBtn()
                {
                    $(".log-btn").off('click');
                    var inp = $.trim($('#num').val());
                    var pass = $.trim($('#pass').val());
                    if (inp != '' && pass != '') {
                        if (!$('.code').hasClass('hide')) {
                            code = $.trim($('#veri').val());
                            if (code == '') {
                                $(".log-btn").addClass("off");
                            } else {
                                $(".log-btn").removeClass("off");
                                sendBtn();
                            }
                        } else {
                            $(".log-btn").removeClass("off");
                            sendBtn();
                        }
                    } else {
                        $(".log-btn").addClass("off");
                    }
                }

                function checkAccount(username){
                    if (username == '') {
                        $('.num-err').removeClass('hide').find("em").text('请输入账户');
                        return false;
                    } else {
                        $('.num-err').addClass('hide');
                        return true;
                    }
                }

                function checkPass(pass){
                    if (pass == '') {
                        $('.pass-err').removeClass('hide').text('请输入密码');
                        return false;
                    } else {
                        $('.pass-err').addClass('hide');
                        return true;
                    }
                }

                function checkCode(code){
                    if (code == '') {
                        // $('.tel-warn').removeClass('hide').text('请输入验证码');
                        return false;
                    } else {
                        // $('.tel-warn').addClass('hide');
                        return true;
                    }
                }

                // 登录点击事件
                function sendBtn() {
                    $(".log-btn").click(function () {
                        var inp = $.trim($('#num').val());
                        var pass = $.trim($('#pass').val());
                        if (checkAccount(inp) && checkPass(pass)) {
                            var ldata = {userinp: inp, password: pass};
                            if (!$('.code').hasClass('hide')) {
                                code = $.trim($('#veri').val());
                                if (!checkCode(code)) {
                                    return false;
                                }
                                ldata.code = code;
                            }

                            var params = {};
                            params.username = inp;
                            params.password = pass;
                            params.loginfrom= $('#loginfrom').val();
                            $(".log-btn").addClass("off");
                            $.ajax({
                                type: "POST",
                                url: ctx + "login",
                                data: params,
                                success: function (r) {
                                    if (r.code == 0) {
                                        parent.location.href = '/index';
                                    } else {
                                        layer.msg(r.msg);
                                        $(".log-btn").removeClass("off");
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                }

        </script>
    </body>

</html>